<template>
  <div>
    <el-form ref="form" :model="fieldForm" :rules="fieldFormRules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级菜单">
<!--            <treeselect-->
<!--              v-model="fieldForm.parentId"-->
<!--              :options="fieldList"-->
<!--              :normalizer="normalizer"-->
<!--              :show-count="true"-->
<!--              placeholder="选择上级菜单"-->
<!--            />-->

            <treeselect
              v-model="fieldForm.parentId"
              :options="fieldDataList"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级菜单"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="字段" prop="field">
            <el-input v-model="fieldForm.field" placeholder="请输入菜单名称" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="字段名称" prop="fieldName">
            <el-input v-model="fieldForm.fieldName" placeholder="请输入字段名称" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>

  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  import {
    addExcPortConfig
  } from "@/api/pm/excPortConfig";

  export default {
    name: "addField.vue",
    components: {Treeselect},
    props: {
      filedList: Array,
      portId: String,
      type: Number
    },
    data() {
      return {
        fieldForm: {
          parentId: '',
          field: '',
          fieldName: ''
        },
        fieldFormRules: {
          field: [
            {required: true, message: '字段不能为空', tiggler: 'blur'}
          ],
          fieldName: [
            {required: true, message: '字段名称不能为空', tiggler: 'blur'}
          ]
        },
        fieldDataList: []
      }
    },
    created () {
      this.getFieldDataList();
      this.fieldForm.portId = this.portId;
      this.fieldForm.type   = this.type;
    },
    watch: {
      // 监视字段parentId的变化
      'fieldForm.parentId': 'treeNodeChange'
    },

    methods: {
      getFieldDataList() {
        this.fieldDataList = [];
        const list = { id: 100, field: '主类目', children: [] };
        list.children = this.filedList;
        this.fieldDataList.push(list);
      },

      // 取消按钮
      cancel() {
        this.$emit("updateFiledDialogOpen", false);
      },

      // 提交按钮
      submitForm() {
        addExcPortConfig(this.fieldForm).then(res=>{
          if(res.code == 200) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
      },

      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.field,
          children: node.children
        };
      },

      // 监视val的变化
      treeNodeChange(val) {
        // console.log('val变化为', val);
      }

    }
  }
</script>

<style scoped>

</style>
